<template>
  <div class="smart-qa">
    <!-- 聊天内容区域 -->
    <div class="chat-container" ref="chatContainer">
      <div class="messages-wrapper">
        <!-- 欢迎界面 -->
        <div class="welcome-section" v-if="messages.length === 0">
          <div class="welcome-header">
            <div class="ai-avatar">
              <svg viewBox="0 0 100 100" class="robot-avatar">
                <circle cx="50" cy="50" r="45" fill="#e6f7ff"/>
                <circle cx="35" cy="40" r="5" fill="#1890ff"/>
                <circle cx="65" cy="40" r="5" fill="#1890ff"/>
                <path d="M 35 65 Q 50 75 65 65" stroke="#1890ff" fill="none" stroke-width="3"/>
              </svg>
            </div>
            <h2>AI智能助手</h2>
            <p>有什么我可以帮您的吗？</p>
          </div>
          <div class="quick-actions">
            <div class="quick-action-title">快速提问</div>
            <div class="quick-action-grid">
              <div class="quick-action-item" @click="quickAsk('如何准备技术面试？')">
                <a-icon type="solution" />
                <span>如何准备技术面试？</span>
              </div>
              <div class="quick-action-item" @click="quickAsk('项目经验怎么准备？')">
                <a-icon type="project" />
                <span>项目经验怎么准备？</span>
              </div>
              <div class="quick-action-item" @click="quickAsk('出3-5道Java面试题')">
                <a-icon type="project" />
                <span>Java面试题?</span>
              </div>
              <div class="quick-action-item" @click="quickAsk('简历应该怎么写？')">
                <a-icon type="file-text" />
                <span>简历应该怎么写？</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 聊天消息 -->
        <div v-else>
          <div v-for="(message, index) in messages" :key="index" class="message-item">
            <div :class="['message', message.type]">
              <div class="avatar">
                <template v-if="message.type === 'user'">
                  <!-- 移除用户头像 -->
                </template>
                <template v-else>
                  <a-avatar :size="40" style="background-color: #f0f7ff; border: 1px solid #e6f7ff">
                    <svg viewBox="0 0 100 100" class="robot-avatar-small">
                      <defs>
                        <linearGradient id="robotGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                          <stop offset="0%" style="stop-color:#4080ff;stop-opacity:1" />
                          <stop offset="100%" style="stop-color:#1890ff;stop-opacity:1" />
                        </linearGradient>
                      </defs>
                      <circle cx="50" cy="50" r="45" fill="#f0f7ff"/>
                      <path d="M50 20
                               A25 25 0 0 1 75 45
                               A25 25 0 0 1 50 70
                               A25 25 0 0 1 25 45
                               A25 25 0 0 1 50 20z" 
                            fill="url(#robotGradient)" 
                            opacity="0.8"/>
                      <circle cx="38" cy="45" r="4" fill="#1890ff"/>
                      <circle cx="62" cy="45" r="4" fill="#1890ff"/>
                      <path d="M 40 60 Q 50 65 60 60" 
                            stroke="#1890ff" 
                            fill="none" 
                            stroke-width="3" 
                            stroke-linecap="round"/>
                    </svg>
                  </a-avatar>
                </template>
              </div>
              <div class="content">
                <div class="sender">{{ message.type === 'user' ? '我' : 'AI助手' }}</div>
                <div class="text markdown-body" v-if="message.type === 'ai'">
                  <span v-html="parseMarkdown(message.content)"></span>
                  <span v-if="thinking && index === messages.length - 1" class="thinking-animation">
                    <span></span>
                    <span></span>
                    <span></span>
                  </span>
                </div>
                <div class="text" v-else>{{ message.content }}</div>
                <div class="message-time">{{ formatTime() }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 底部工具栏 -->
      <div class="bottom-area">
        <div class="input-area">
          <div class="input-wrapper">
            <a-input
              v-model:value="inputMessage"
              placeholder="输入您的问题，按回车发送..."
              :disabled="thinking"
              @pressEnter="sendMessage"
            >
              <template #suffix>
                <a-button
                  type="text"
                  class="send-button"
                  :disabled="!inputMessage.trim() || thinking"
                  :loading="thinking"
                  @click="sendMessage"
                >
                  <svg t="1703150831144" class="send-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4242" width="32" height="32">
                    <path d="M931.4 498.9L94.9 79.5c-3.4-1.7-7.3-2.1-11-1.2-8.5 2.1-13.8 10.7-11.7 19.3l86.2 352.2c1.3 5.3 5.2 9.6 10.4 11.3l147.7 50.7-147.6 50.7c-5.2 1.8-9.1 6-10.3 11.3L72.2 926.5c-0.9 3.7-0.5 7.6 1.2 10.9 3.9 7.9 13.5 11.1 21.5 7.2l836.5-417c3.1-1.5 5.6-4.1 7.2-7.1 3.9-8 0.7-17.6-7.2-21.6zM170.8 826.3l50.3-205.6 295.2-101.3c2.3-0.8 4.2-2.6 5-5 1.4-4.2-0.8-8.7-5-10.2L221.1 403 171 198.2l628 314.9-628.2 313.2z" fill="#666666" p-id="4243"></path>
                  </svg>
                </a-button>
              </template>
            </a-input>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'
import { marked } from 'marked'
import DOMPurify from 'dompurify'
import { Button, Input } from 'ant-design-vue'
import { 
  PictureOutlined, 
  EditOutlined,
  SearchOutlined,
  ReadOutlined,
  BookOutlined,
  MoreOutlined,
  PaperClipOutlined,
  ScissorOutlined,
  PhoneOutlined,
  AudioOutlined
} from '@ant-design/icons-vue'
import 'ant-design-vue/dist/antd.css'
import hljs from 'highlight.js'
import 'highlight.js/styles/github.css'

// 配置marked选项
marked.setOptions({
  breaks: true,
  gfm: true,
  highlight: function(code, lang) {
    const language = hljs.getLanguage(lang) ? lang : 'plaintext';
    return hljs.highlight(code, { language }).value;
  },
  langPrefix: 'hljs language-'
})

export default {
  name: 'SmartQA',
  components: {
    AButton: Button,
    AInput: Input,
    PictureOutlined,
    EditOutlined,
    SearchOutlined,
    ReadOutlined,
    BookOutlined,
    MoreOutlined,
    PaperClipOutlined,
    ScissorOutlined,
    PhoneOutlined,
    AudioOutlined
  },
  data() {
    return {
      messages: [],
      inputMessage: '',
      thinking: false,
      userId: localStorage.getItem('loginId') || '',
      ws: null,
      isReceiving: false,
      currentMessage: '',
      messageTimer: null,
      observer: null,
      autoScroll: true
    }
  },
  created() {
    this.connectWebSocket()
  },
  mounted() {
    // 添加复制代码功能
    window.copyCode = (button) => {
      const pre = button.closest('.code-block')
      const code = pre.querySelector('code')
      const text = code.innerText
      
      navigator.clipboard.writeText(text).then(() => {
        button.textContent = '已复制!'
        setTimeout(() => {
          button.textContent = '复制'
        }, 2000)
      }).catch(err => {
        console.error('复制失败:', err)
        this.$message.error('复制失败')
      })
    }

    // 获取消息容器
    const messagesWrapper = this.$refs.chatContainer.querySelector('.messages-wrapper')
    
    // 添加滚动事件监听
    messagesWrapper.addEventListener('scroll', () => {
      const { scrollTop, scrollHeight, clientHeight } = messagesWrapper
      // 如果用户向上滚动超过200px，则禁用自动滚动
      if (scrollHeight - scrollTop - clientHeight > 200) {
        this.autoScroll = false
      } else {
        this.autoScroll = true
      }
    })

    // 监听消息变化
    this.observer = new MutationObserver(() => {
      // 如果正在接收AI回复，始终滚动到底部
      if (this.thinking) {
        const messagesWrapper = this.$refs.chatContainer.querySelector('.messages-wrapper')
        if (messagesWrapper) {
          messagesWrapper.scrollTop = messagesWrapper.scrollHeight
        }
      }
    })
    
    this.observer.observe(messagesWrapper, {
      childList: true,
      subtree: true,
      characterData: true
    })
  },
  methods: {
    connectWebSocket() {
      if (!this.userId) {
        this.$message.error('未登录，请先登录')
        return
      }

      if (this.ws && this.ws.readyState === WebSocket.OPEN) {
        return
      }

      this.ws = new WebSocket(`ws://localhost:4003/socket/subject/${this.userId}`)
      
      this.ws.onopen = () => {
        console.log('WebSocket连接')
      }
      
      this.ws.onmessage = (event) => {
        if (!event.data) return
        
        if (this.thinking) {
          if (this.messageTimer) {
            clearTimeout(this.messageTimer)
          }

          this.currentMessage = event.data
          this.messages[this.messages.length - 1].content = this.currentMessage
          
          // 立即执行滚动，不需要判断autoScroll
          this.$nextTick(() => {
            const messagesWrapper = this.$refs.chatContainer.querySelector('.messages-wrapper')
            if (messagesWrapper) {
              messagesWrapper.scrollTop = messagesWrapper.scrollHeight
            }
          })
          
          this.messageTimer = setTimeout(() => {
            this.thinking = false
            this.isReceiving = false
            
            // AI回复结束后再次确保滚动到底部
            this.$nextTick(() => {
              const messagesWrapper = this.$refs.chatContainer.querySelector('.messages-wrapper')
              if (messagesWrapper) {
                messagesWrapper.scrollTop = messagesWrapper.scrollHeight
              }
            })
          }, 1000)
        }
      }
      
      this.ws.onerror = (error) => {
        console.error('websocket错误:', error)
        if (!this.ws || this.ws.readyState === WebSocket.CLOSED) {
         
        }
      }

      this.ws.onclose = () => {
        console.log('WebSocket连接已关闭')
        if (this.thinking) {
          this.reconnectWebSocket()
        }
      }
    },
    reconnectWebSocket() {
      const maxRetries = 5
      const retryInterval = 3000
      let retryCount = 0

      const retry = () => {
        if (!this.userId) {
          this.$message.error('未登录，请先登录')
          return
        }

        if (this.ws && this.ws.readyState === WebSocket.OPEN) {
          return
        }

        if (retryCount < maxRetries) {
          console.log(`尝试重新连接... (${retryCount + 1}/${maxRetries})`)
          setTimeout(() => {
            this.connectWebSocket()
            if (!this.ws || this.ws.readyState !== WebSocket.OPEN) {
              retryCount++
              retry()
            }
          }, retryInterval)
        } else {
          
        }
      }

      retry()
    },
    async sendMessage() {
      if (!this.inputMessage.trim() || this.thinking) return
      if (!this.ws || this.ws.readyState !== WebSocket.OPEN) {
        this.$message.error('连接已断开，请刷新页面重试')
        return
      }

      // 发送新消息时启用自动滚动
      this.autoScroll = true

      // 添加用户消息
      this.messages.push({
        type: 'user',
        content: this.inputMessage.trim()
      })

      // 立即添加AI消息占位
      this.messages.push({
        type: 'ai',
        content: ''
      })

      const messageContent = this.inputMessage.trim()
      this.inputMessage = ''

      this.thinking = true
      this.isReceiving = true
      this.currentMessage = ''
      
      // 确保消息发送后立即滚动到底部
      await this.$nextTick()
      this.scrollToBottom()
      
      try {
        await request({
          url: '/subject/qa/submit',
          method: 'post',
          data: { message: messageContent }
        })
      } catch (error) {
        console.error('消息发送失败:', error)
        this.$message.error('消息发送失败，请稍后重试')
        this.messages.pop()
        this.thinking = false
        this.isReceiving = false
      }
    },
    quickAsk(question) {
      this.inputMessage = question
      this.sendMessage()
    },
    formatTime() {
      const now = new Date()
      const hours = now.getHours().toString().padStart(2, '0')
      const minutes = now.getMinutes().toString().padStart(2, '0')
      return `${hours}:${minutes}`
    },
    parseMarkdown(content) {
      if (!content) return ''
      const html = marked(content)
      const cleanHtml = DOMPurify.sanitize(html)
      
      // 为代码块添加复制按钮和提示
      const wrappedHtml = cleanHtml.replace(
        /<pre><code class="hljs language-([^"]+)">/g,
        (match, lang) => `
          <pre class="code-block">
            <div class="code-header">
              <div class="code-header-left">
                <span class="code-lang">${lang}</span>
                <span class="scroll-hint">← → 移动视角</span>
              </div>
              <button class="copy-button" onclick="copyCode(this)">
                <span class="copy-icon">
                  <svg viewBox="64 64 896 896" focusable="false" data-icon="copy" width="1em" height="1em" fill="currentColor" aria-hidden="true">
                    <path d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"></path>
                  </svg>
                </span>
                <span class="copy-text">复制代码</span>
              </button>
            </div>
            <div class="code-content">
              <code class="hljs language-${lang}">`
      ).replace(/<\/code><\/pre>/g, '</code></div></pre>')
      
      return wrappedHtml
    },
    scrollToBottom() {
      const messagesWrapper = this.$refs.chatContainer.querySelector('.messages-wrapper')
      if (!messagesWrapper) return
      
      // 直接设置scrollTop，不使用平滑滚动
      messagesWrapper.scrollTop = messagesWrapper.scrollHeight
    }
  },
  beforeDestroy() {
    if (this.ws) {
      this.ws.close()
    }
    if (this.messageTimer) {
      clearTimeout(this.messageTimer)
    }
    if (this.observer) {
      this.observer.disconnect()
    }
    // 移除滚动事件监听
    const messagesWrapper = this.$refs.chatContainer?.querySelector('.messages-wrapper')
    if (messagesWrapper) {
      messagesWrapper.removeEventListener('scroll')
    }
  }
}
</script>

<style lang="scss" scoped>
.smart-qa {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  padding: 0;
  margin: 0;
}

.chat-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  margin: 0;
  background: transparent;
  box-shadow: none;
  border: none;
}

.messages-wrapper {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  padding-bottom: 100px;
}

.welcome-section {
  text-align: center;
  padding: 40px 0;

  .welcome-header {
    margin-bottom: 40px;

    .ai-avatar {
      width: 120px;
      height: 120px;
      margin: 0 auto 20px;
      
      .robot-avatar {
        width: 100%;
        height: 100%;
        filter: drop-shadow(0 4px 12px rgba(24, 144, 255, 0.3));
      }
    }

    h2 {
      font-size: 28px;
      color: #1f1f1f;
      margin-bottom: 12px;
    }

    p {
      font-size: 16px;
      color: #666;
    }
  }
}

.quick-actions {
  max-width: 600px;
  margin: 0 auto;

  .quick-action-title {
    font-size: 18px;
    color: #1f1f1f;
    margin-bottom: 20px;
    font-weight: 500;
  }

  .quick-action-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .quick-action-item {
    padding: 20px;
    background: white;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    gap: 12px;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      border-color: #1890ff;
    }

    .anticon {
      font-size: 20px;
      color: #1890ff;
    }

    span {
      font-size: 14px;
      color: #333;
    }
  }
}

.message-item {
  margin-bottom: 24px;

  &:last-child {
    margin-bottom: 0;
  }
}

.message {
  display: flex;
  gap: 16px;

  .content {
    max-width: 70%;
  }

  .sender {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.45);
    margin-bottom: 4px;
  }

  .text {
    padding: 12px 16px;
    border-radius: 12px;
    word-break: break-word;
    position: relative;
    line-height: 1.6;
    min-height: 24px;

    &:empty {
      padding: 0;
      border: none;
    }

    .thinking-animation {
      display: inline-flex;
      gap: 4px;
      align-items: center;
      margin-left: 8px;
      vertical-align: middle;
      line-height: 1;
      padding: 2px 4px;

      span {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #1890ff;
        animation: thinking 1.4s infinite ease-in-out;
        display: inline-block;
        box-shadow: 0 0 2px rgba(24, 144, 255, 0.5);

        &:nth-child(1) {
          animation-delay: 0s;
        }

        &:nth-child(2) {
          animation-delay: 0.2s;
          margin: 0 1px;
        }

        &:nth-child(3) {
          animation-delay: 0.4s;
        }
      }
    }

    :deep(p) {
      margin: 0;
      padding: 0;
      display: inline;
    }

    :deep(p:not(:last-child)) {
      margin-bottom: 8px;
      display: block;
    }

    :deep(ul), :deep(ol) {
      margin: 8px 0;
      display: block;
    }

    :deep(li) {
      display: block;
    }
  }

  &.user {
    flex-direction: row-reverse;

    .text {
      background: #f0f7ff;
      color: #333;
      border: 1px solid #e6f7ff;
      border-bottom-right-radius: 4px;
    }

    .content {
      align-items: flex-end;
      text-align: right;
    }

    .avatar {
      display: none; // 隐藏用户头像
    }
  }

  &.ai .text {
    background: white;
    color: #1f1f1f;
    border: 1px solid #f0f0f0;
    border-bottom-left-radius: 4px;

    .thinking-animation span {
      background: rgba(24, 144, 255, 0.6);
    }
  }
}

.robot-avatar-small {
  width: 24px;
  height: 24px;
  animation: robotFloat 3s ease-in-out infinite;
}

@keyframes robotFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}

.thinking-animation {
  display: inline-flex;
  gap: 4px;
  margin-bottom: 8px;

  span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #1890ff;
    animation: thinking 1.4s infinite ease-in-out;

    &:nth-child(2) {
      animation-delay: 0.2s;
    }

    &:nth-child(3) {
      animation-delay: 0.4s;
    }
  }
}

@keyframes thinking {
  0%, 80%, 100% { 
    transform: scale(0.4);
    opacity: 0.3;
  }
  40% { 
    transform: scale(1);
    opacity: 1;
  }
}

.bottom-area {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 16px 24px;
  border-top: 1px solid #f0f0f0;
  z-index: 100;
}

.input-area {
  margin: 0 auto;
  width: 100%;
  max-width: 800px;
}

.input-wrapper {
  background: #fff;
  border-radius: 24px;
  transition: all 0.3s;
  border: 1px solid #e5e7eb;
  
  &:hover, &:focus-within {
    border-color: #1890ff;
    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
  }

  :deep(.ant-input) {
    padding: 12px 16px;
    height: 48px;
    font-size: 14px;
    border: none;
    box-shadow: none !important;
    background: transparent;

    &::placeholder {
      color: #999;
    }
  }
}

.input-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;

  .tool-icon {
    color: #666;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s;

    &:hover {
      color: #1890ff;
      background: rgba(24, 144, 255, 0.1);
    }
  }

  .divider {
    width: 1px;
    height: 20px;
    background: #e5e7eb;
    margin: 0 4px;
  }
}

.send-button {
  width: 36px;
  height: 36px;
  min-width: unset;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent !important;

  &:hover {
    background: rgba(0, 0, 0, 0.04) !important;
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .send-icon {
    width: 20px;
    height: 20px;
  }
}

:deep(.markdown-body) {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    'Noto Sans', sans-serif;
  
  h1, h2, h3, h4, h5, h6 {
    margin-top: 16px;
    margin-bottom: 8px;
    font-weight: 600;
    line-height: 1.25;
  }

  p {
    margin-bottom: 8px;
  }

  ul, ol {
    padding-left: 20px;
    margin-bottom: 8px;
  }

  code {
    padding: 0.2em 0.4em;
    margin: 0;
    font-size: 85%;
    background-color: rgba(27,31,35,0.05);
    border-radius: 3px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
  }

  pre {
    padding: 16px;
    overflow: auto;
    font-size: 85%;
    line-height: 1.45;
    background-color: #f6f8fa;
    border-radius: 8px;
    margin: 16px 0;
    border: 1px solid #eaecef;

    code {
      padding: 0;
      margin: 0;
      background-color: transparent;
      border: 0;
      display: block;
      overflow-x: auto;
      
      &.hljs {
        background: transparent;
        padding: 0;
        
        .hljs-comment,
        .hljs-quote {
          color: #6a737d;
          font-style: italic;
        }

        .hljs-keyword,
        .hljs-selector-tag,
        .hljs-subst {
          color: #d73a49;
        }

        .hljs-number,
        .hljs-literal,
        .hljs-variable,
        .hljs-template-variable,
        .hljs-tag .hljs-attr {
          color: #005cc5;
        }

        .hljs-string,
        .hljs-doctag {
          color: #032f62;
        }

        .hljs-title,
        .hljs-section,
        .hljs-selector-id {
          color: #6f42c1;
        }

        .hljs-type,
        .hljs-class .hljs-title {
          color: #d73a49;
        }
      }
    }
  }

  .code-block {
    position: relative;
    margin: 16px 0;
    border-radius: 4px;
    background: #1e1e1e;
    border: none;
    overflow: hidden;
  }

  .code-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    background: #1e1e1e;
    color: #d4d4d4;
    border-bottom: 1px solid #333;
  }

  .code-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .code-lang {
    font-size: 12px;
    color: #808080;
    font-family: Monaco, Consolas, monospace;
  }

  .scroll-hint {
    font-size: 12px;
    color: #808080;
  }

  .copy-button {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    font-size: 12px;
    color: #808080;
    background: transparent;
    border: 1px solid #333;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s;

    .copy-icon {
      display: flex;
      align-items: center;
      font-size: 12px;
    }

    .copy-text {
      font-size: 12px;
    }

    &:hover {
      color: #fff;
      background: #333;
      border-color: #444;
    }
  }

  .code-content {
    padding: 12px;
    background: #1e1e1e;
    overflow-x: auto;

    &::-webkit-scrollbar {
      height: 6px;
    }

    &::-webkit-scrollbar-thumb {
      background: #444;
      border-radius: 3px;
    }

    &::-webkit-scrollbar-track {
      background: #2d2d2d;
    }

    code {
      font-family: Monaco, Consolas, 'Liberation Mono', Menlo, Courier, monospace;
      font-size: 13px;
      line-height: 1.5;
      color: #d4d4d4;
    }

    .hljs {
      color: #d4d4d4;
      background: transparent;
    }
  }
}
</style> 